<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>大屏</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/layout.css">
  <script src="js/jquery-3.4.1.js"></script>
  <script src="js/jquery.scrollbox.js"></script>
  <script src="js/rem.js"></script>
</head>

<body>
  <div class="header">
    <span>用户评论语义分析展示大屏</span>
  </div>
  <div class="main">
    <div class="showbox" style="display:none;">&gt</div>
    <div class="leftbar">
      <div class="title">>>&nbsp&nbspcategory/产品选择列表</div>
      <div class="left-content">
        <div class="title">category</div>
        <div class="list">
          <p><input type="checkbox">APPLIANCES</p>
          <p><input type="checkbox">BABY CARE</p>
          <p><input type="checkbox">FABRIC ENHANCER</p>
          <p><input type="checkbox">FEMALE DEVICE IPL</p>
          <p><input type="checkbox">FEMININE CARE</p>
          <p><input type="checkbox">HAIR CARE</p>
          <p><input type="checkbox">LAUNDRY DETERGENT</p>
          <p><input type="checkbox">ORAL CARE</p>
          <p><input type="checkbox">PERSONAL CARE</p>
        </div>
      </div>
      <div class="left-content">
        <div class="title">brand</div>
        <div class="list">
          <p><input type="checkbox">Ariel</p>
          <p><input type="checkbox">AUSSIE</p>
          <p><input type="checkbox">Bold</p>
          <p><input type="checkbox">Braun</p>
          <p><input type="checkbox">Crest</p>
          <p><input type="checkbox">Downy</p>
          <p><input type="checkbox">Gillette</p>
          <p><input type="checkbox">HAIR RECIPE</p>
          <p><input type="checkbox">Head&Shoulders</p>
        </div>
      </div>
      <div class="left-content">
        <div class="title">产品选择列表</div>
        <div class="list">
          <p><input type="checkbox">VS沙宣清盈顺柔洗护套装洗发水400ml+护发素2l顺滑清爽蓬松</p>
          <p><input type="checkbox">VS沙宣盈卷修润弹力素女士卷发保湿精华护卷防定型持久100ml</p>
          <p><input type="checkbox">飘柔去油洗发水190ml家庭护理绿茶长效清爽控油 止痒 控油</p>
          <p><input type="checkbox">飘柔香氛洗发水露530甜美花漾花香持久留香修护枯毛躁 男女正品</p>
          <p><input type="checkbox">飘柔滋润去屑洗发水露套装500*3 去油止痒修护</p>
          <p><input type="checkbox">飘柔焗油护理洗发水露套装500*2+护发素500修枯毛躁男女正品</p>
          <p><input type="checkbox">VS沙宣发胶持久定型喷雾300ml小钢炮哑光发泥50g男女干胶清香</p>
          <p><input type="checkbox">VS沙宣蓬蓬水头发蓬松定型喷雾套装 持久控油男香便携装30ml</p>
          <p><input type="checkbox">澳丝奇迹水润洗发水75ml"</p>
        </div>
      </div>
      <div class="hidebox">&lt</div>
    </div>
    <div class="rightbar">
      <div class="good rightcontent">
        <div class="rightbar-title">好评</div>
        <div class="title">>>&nbsp&nbsp热点词词云对比</div>
        <div class="wordpic"></div>
        <div class="title">>>&nbsp&nbsp好评热评评论</div>
        <div class="comment-box1">
          <ul>
            <li class="comment">
              <span class="author">P&G丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
            <li class="comment">
              <span class="author">VS丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
            <li class="comment">
              <span class="author">SYOSS丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
            <li class="comment">
              <span class="author">TSUBAKI丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
            <li class="comment">
              <span class="author">P&G丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是一条热门评
              论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
            <li class="comment">
              <span class="author">VSD丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是一条热门评
              论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
            <li class="comment">
              <span class="author">DOSK丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
              一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是一条热门评
              论的文本信息，本条信息仅进行热门文本排序展示。
            </li>
          </ul>
        </div>
      </div>
      <div class="bad rightcontent">
        <div class="rightbar-title">差评</div>
        <div class="title">>>&nbsp&nbsp热点词词云对比</div>
        <div class="wordpic"></div>
        <div class="title">>>&nbsp&nbsp差评热评评论</div>
        <div class="comment-box2">
            <ul>
              <li class="comment">
                <span class="author">P&G丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
              <li class="comment">
                <span class="author">VS丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
              <li class="comment">
                <span class="author">SYOSS丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
              <li class="comment">
                <span class="author">TSUBAKI丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
              <li class="comment">
                <span class="author">P&G丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是一条热门评
                论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
              <li class="comment">
                <span class="author">VSD丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是一条热门评
                论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
              <li class="comment">
                <span class="author">DOSK丨</span>这是一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是
                一条热门评论的文本信息，本条信息仅进行热门文本排序展示。这是一条热门评
                论的文本信息，本条信息仅进行热门文本排序展示。
              </li>
            </ul>
        </div>
      </div>
    </div>
  </div>
</body>

<script>
  $(".comment-box1").scrollbox({
    startDelay: 5,
    delay:2,
  });
  $(".comment-box2").scrollbox({});
  $(".hidebox").click(function(){
    $(".leftbar").hide();
    $(".showbox").show();
    $(".main").css("padding-left","10px");
  });
  $(".showbox").click(function(){
    $(".leftbar").show();
    $(".showbox").hide();
  })
</script>

</html>